<template>
  <div>
    <div class="input-box" v-if="type==='input'">
      <div class="inputs padding-3 flex-center-between">
        <img class="icon" src="../../../assets/images/phone.png" alt="">
        <input
            v-bind="$attrs"
            @input="handleInput"
            type="text"
            placeholder="请输入手机号">
      </div>
    </div>

    <div class="input-box" v-if="type==='password'">
      <div class="inputs padding-3 flex-center-between">
        <img class="icon" src="@/assets/images/pwd.png" alt="">
        <input
            v-bind="$attrs"
            @input="handleInput"
            :type="!isInput ? 'text':'password'" placeholder="请输入密码">
        <a href="javascript:void (0)" @click="isInput=false" v-if="isInput">
          <van-icon size="16" name="closed-eye" />
        </a>
        <a href="javascript:void (0)" @click="isInput=true" v-else>
          <van-icon size="16" name="eye-o" />
        </a>
      </div>
    </div>

    <div class="input-box" v-if="type==='code'">
      <div class="inputs yzm padding-3 flex-center-between">
        <img class="icon" src="@/assets/images/yzm.png" alt="">
        <input
            v-bind="$attrs"
            @input="handleInput"
            type="text" placeholder="验证码">
      </div>
      <a class="btn" href="javascript:void (0)">发送验证码</a>
    </div>

  </div>
</template>

<script>
export default {
  props:{
    type:{
      default:'input',
    }
  },
  data(){
    return{
      isInput:true,
      inputValue: '',
    }
  },
  methods:{

    handleInput(event) {
      this.inputValue = event.target.value;
      this.$emit('input', this.inputValue);
    },

  }
}
</script>

<style scoped lang="scss">
.input-box{
  width: 100%;
  display: flex;
  height: 45px;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 20px 0;
  .inputs{
    width: 100%;
    height: 45px;

    border: 1px solid #fa709a;
    border-radius: 8px;
    .icon{
      height: 24px;
    }
    input{
      width: 100%;
      font-size: 16px;
      text-indent: 10px;
      color: #666666;
    }
    input::placeholder{
      color: #999999;
      font-size: 14px;
    }
    a{
      display: flex;
      height: 45px;
      align-items: center;
      color: #333;
    }
  }
  .yzm{
    width: 50%;
  }
  .btn{
    display: flex;
    width: 150px;
    height: 45px;
    font-size: 14px;
    color: #fff;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
  }
  .submit{
    margin-top: 10px;
    width: 100%;
    display: flex;
    height: 45px;
    color: #fff;
    font-size: 14px;
    background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
    border-radius: 8px;
    justify-content: center;
    align-items: center;
  }
}
</style>